<div class="container-fluid layout">
  <div class="layout-container">
    <div class="prompt"> 您当前选择的是：<span>（商品上架后不可修改，请谨慎选择）</span></div>
    <div class="search-wrapper">
      <div class="search-item">
        <input type="text" class="form-control" placeholder="请输入类目名称" [(ngModel)]="oneKeyword"><i class="iconfont icon-search" (click)="search(0)"></i>
        <div class="search-content">
          <ul class="list-unstyled">
            <li *ngFor="let item of oneCategoryList" [ngClass]="{'active': nowOneCategory?.id === item.id}" (click)="selectNowCategory(item)">{{item.name}}
            </li>
          </ul>
        </div>
      </div>
      <div class="search-item">
        <input type="text" class="form-control" placeholder="请输入类目名称" [(ngModel)]="twoKeyword"><i class="iconfont icon-search" (click)="search(1)"></i>
        <div class="search-content">
          <ul class="list-unstyled">
            <li *ngFor="let item of twoCategoryList" [ngClass]="{'active': nowTwoCategory?.id === item.id}" (click)="selectNowCategory(item)">{{item.name}}
            </li>
          </ul>
        </div>
      </div>
      <div class="search-item">
        <input type="text" class="form-control" placeholder="请输入类目名称" [(ngModel)]="threeKeyword"><i class="iconfont icon-search" (click)="search(2)"></i>
        <div class="search-content">
          <ul class="list-unstyled">
            <li *ngFor="let item of threeCategoryList" [ngClass]="{'active': nowThreeCategory?.id === item.id}" (click)="selectNowCategory(item)">{{item.name}}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="text-center">
      <button class="btn btn-success btn-md-long" [disabled]="!nowThreeCategory" (click)="nextAdd($event)">下一步</button>
    </div>

  </div>

</div>
